<template>
	<view class="my-swiper-container">
		<view ref="tabbar" class="tabbar-list">
			<view class="tabbar-item" 
			:class="[current === index ? 'active' : '']" 
			@click="changeTabbar(index)"
			v-for="(item, index) in tabbar" :key="index">
				{{ item.label }}
			</view>
			<view class="line" :style="{ width: lineStyle.width, transform: lineStyle.transform,transitionDuration: lineStyle.transitionDuration}"></view>
		</view>
		<view class="swiper-wrapper">
			<swiper :interval="3000" :style="{ height: `${swiperHeight}px` }" :duration="1000" :current="current" @change="changeCurrent">
				<swiper-item class="tabbar-content">
					<scroll-view scroll-y v-if="allOrder && allOrder.length > 0">
						<navigator :url="`/subcontract/order_detail/order_detail?orderId=${item.orderId}`" v-for="item in allOrder" :key="item.orderId">
							<view class="tabbar-content-item">
								<view class="title">
									<view class="title-left">
										<!-- 大疆创新 -->
										{{ item.storeName }}
									</view>
									<view class="title-right">
										<!-- 交易成功 -->
										<text v-if="item.orderState === -1">交易关闭</text>
										<text v-if="item.orderState === 0">待付款</text>
										<text v-if="item.orderState === 1">待发货</text>
										<text v-if="item.orderState === 2">待收货</text>
										<text v-if="item.orderState === 3">交易成功</text>
									</view>
								</view>
								<view class="thing">
									<view class="thing-pic">
										<image :src="$imageUrl + item.goodsImg"></image>
									</view>
									<view class="thing-info">
										<view class="thing-name">
											<!-- 全球购 Nike Air Force 1 Low Shadow 防滑减震耐磨 低帮 板鞋 女款 黑白红 -->
											{{ item.goodsName }}
										</view>
										<view class="thing-setting">
											<!-- 44 数量×1 -->
											{{ item.goodsOptions }}
										</view>
										<view class="pay-price">
											<view class="label">
												实付款
											</view>
											<!-- <text class="price">1286.29</text> -->
											<text class="price">{{ item.goodsPrice * item.goodsCount }}</text>
										</view>
									</view>
								</view>
							</view>
						</navigator>
					</scroll-view>
					<view class="not-fount" v-else>
						<image src="../../static/cry.png"></image>
						暂无订单
					</view>
				</swiper-item>
				<swiper-item class="tabbar-content">
					<scroll-view scroll-y v-if="waitPayOreder && waitPayOreder.length > 0">
						<navigator :url="`/subcontract/order_detail/order_detail?orderId=${item.orderId}`" v-for="item in waitPayOreder" :key="item.orderId">
							<view class="tabbar-content-item">
								<view class="title">
									<view class="title-left">
										{{ item.storeName }}
									</view>
									<view class="title-right">
										<text v-if="item.orderState === 0">待付款</text>
										<text v-if="item.orderState === 1">待发货</text>
										<text v-if="item.orderState === 2">待收货</text>
										<text v-if="item.orderState === 3">交易成功</text>
									</view>
								</view>
								<view class="thing">
									<view class="thing-pic">
										<image :src="$imageUrl + item.goodsImg"></image>
									</view>
									<view class="thing-info">
										<view class="thing-name">
											{{ item.goodsName }}
										</view>
										<view class="thing-setting">
											{{ item.goodsOptions }}
										</view>
										<view class="pay-price">
											<view class="label">
												实付款
											</view>
											<text class="price">{{ item.goodsPrice * item.goodsCount }}</text>
										</view>
									</view>
								</view>
							</view>
						</navigator>
					</scroll-view>
					<view class="not-fount" v-else>
						<image src="../../static/cry.png"></image>
						暂无订单
					</view>
				</swiper-item>
				<swiper-item class="tabbar-content">
					<scroll-view scroll-y v-if="toBeShipped && this.toBeShipped.length > 0">
						<navigator :url="`/subcontract/order_detail/order_detail?orderId=${item.orderId}`" v-for="item in toBeShipped" :key="item.orderId">
							<view class="tabbar-content-item">
								<view class="title">
									<view class="title-left">
										{{ item.storeName }}
									</view>
									<view class="title-right">
										<text v-if="item.orderState === 0">待付款</text>
										<text v-if="item.orderState === 1">待发货</text>
										<text v-if="item.orderState === 2">待收货</text>
										<text v-if="item.orderState === 3">交易成功</text>
									</view>
								</view>
								<view class="thing">
									<view class="thing-pic">
										<image :src="$imageUrl + item.goodsImg"></image>
									</view>
									<view class="thing-info">
										<view class="thing-name">
											{{ item.goodsName }}
										</view>
										<view class="thing-setting">
											<!-- 44 数量×1 -->
											{{ item.goodsOptions }}
										</view>
										<view class="pay-price">
											<view class="label">
												实付款
											</view>
											<text class="price">{{ item.goodsPrice * item.goodsCount }}</text>
										</view>
									</view>
								</view>
							</view>
						</navigator>
					</scroll-view>
					<view class="not-fount" v-else>
						<image src="../../static/cry.png"></image>
						暂无订单
					</view>
				</swiper-item>
				<swiper-item class="tabbar-content">
					<scroll-view scroll-y v-if="toBeReceived && toBeReceived.length > 0">
						<navigator :url="`/subcontract/order_detail/order_detail?orderId=${item.orderId}`" v-for="item in toBeReceived" :key="item.orderId">
							<view class="tabbar-content-item">
								<view class="title">
									<view class="title-left">
										{{ item.storeName }}
									</view>
									<view class="title-right">
										<text v-if="item.orderState === 0">待付款</text>
										<text v-if="item.orderState === 1">待发货</text>
										<text v-if="item.orderState === 2">待收货</text>
										<text v-if="item.orderState === 3">交易成功</text>
									</view>
								</view>
								<view class="thing">
									<view class="thing-pic">
										<image :src="$imageUrl + item.goodsImg"></image>
									</view>
									<view class="thing-info">
										<view class="thing-name">
											{{ item.goodsName }}
										</view>
										<view class="thing-setting">
											{{ item.goodsOptions }}
										</view>
										<view class="pay-price">
											<view class="label">
												实付款
											</view>
											<text class="price">{{ item.goodsPrice * item.goodsCount }}</text>
										</view>
									</view>
								</view>
							</view>
						</navigator>
					</scroll-view>
					<view class="not-fount" v-else>
						<image src="../../static/cry.png"></image>
						暂无订单
					</view>
				</swiper-item>
			</swiper>
		</view>
	</view>
</template>

<script>
	import { mapState } from 'vuex'
	export default {
		data() {
			return {
				width: 0,
				current: 0,
				lineStyle: {},
				swiperHeight: 0,
				tabbar: [
					{
						label: '全部订单'
					},
					{
						label: '待付款'
					},
					{
						label: '待发货'
					},
					{
						label: '待收货'
					}
				],
				waitPayOreder: [],
				allOrder: [],
				toBeReceived: [],
				toBeShipped: [],
			}
		},
		onLoad(e) {
			console.log(e);
			this.current = e ? e.state : 0
			this.getAllTypeOrder()
		},
		mounted() {
			this.lineChange()
			uni.getSystemInfo({
				success: (resu) => {
					const query = uni.createSelectorQuery()
					query.select('.tabbar-list').boundingClientRect().exec(res => {
						this.swiperHeight = resu.windowHeight - res[0].height
					})
				}
			})
		},
		computed: {
			...mapState('module_user', ['userinfo'])
		},
		methods: {
			changeTabbar(index) {
				this.current = index
				this.lineChange()
			},
			changeCurrent(e) {
				this.current = e.target.current
				this.lineChange()
			},
			lineChange() {
				let lineWidth = 0, lineLeft = 0
				this.getElementData(`.tabbar-item`, (data)=> {
					let el = data[this.current]
					lineWidth = el.width / 2
					// lineLeft = el.width * (this.currentIndex + 0.5)  // 此种只能针对每个item长度一致的
					lineLeft = el.width / 2 + (-data[0].left) + el.left
					this.lineStyle = {
						width: `${lineWidth}px`,
						transform: `translateX(${lineLeft}px) translateX(-50%)`,
						transitionDuration: `${this.duration}s`
					}
				})
			},
			getElementData(el, callback){
				uni.createSelectorQuery().in(this).selectAll(el).boundingClientRect().exec((data) => {
					callback(data[0]);
				});
			},
			async getAllTypeOrder() {
				const { data: res1 } = await uni.$http.get(`/user/orders`, { userId: this.userinfo.id })
				this.allOrder = res1.data ? res1.data : []
				const { data: res2 } = await uni.$http.get(`/user/orders`, { userId: this.userinfo.id, orderState: 0 })
				this.waitPayOreder = res2.data  ? res2.data : []
				const { data: res3 } = await uni.$http.get(`/user/orders`, { userId: this.userinfo.id, orderState: 1 })
				this.toBeShipped = res3.data  ? res3.data : []
				const { data: res4 } = await uni.$http.get(`/user/orders`, { userId: this.userinfo.id, orderState: 2 })
				this.toBeReceived = res4.data  ? res4.data : []
			}
		},
	}
</script>

<style lang="scss">
.my-swiper-container {
	width: 100%;
	height: 100%;
}
.tabbar-list {
	display: flex;
	position: sticky;
	top: 0;
	left: 0;
	z-index: 999;
	background-color: #fff;
	.tabbar-item {
		height: 40px;
		flex-grow: 1;
		display: flex;
		align-items: center;
		justify-content: center;
		&.active {
			color: #000 !important;
			font-weight: bold;
			transition: .5s all;
		}
	}
	.line {
		// width: 30px;
		position: absolute;
		bottom: 8rpx;
		height: 2px;
		background-color: #000;
		transition: .5s all;
	}
}
.swiper-wrapper {
	width: 100%;
	box-sizing: border-box;
	swiper {
		width: 100%;
		display: flex;
		flex-direction: row;
		.tabbar-content {
			width: 100%;
		}
		.tabbar-content-item {
			width: 100%;
			padding: 20rpx;
			box-sizing: border-box;
			background-color: #fff;
			margin-bottom: 20rpx;
			.title {
				font-size: 14px;
				display: flex;
				padding: 20rpx;
				justify-content: space-between;
				border-bottom: 1px solid #f0f0f0;
			}
			.thing {
				display: flex;
				padding: 20rpx 0;
				.thing-pic {
					width: 90px;
					height: 90px;
					box-sizing: border-box;
					border: 1px solid #f0f0f0;
					margin-right: 20rpx;
					image {
						width: 100%;
						height: 100%;
					}
				}
				.thing-info {
					width: 70%;
					display: flex;
					flex-direction: column;
					justify-content: space-between;
					.thing-name {
						font-size: 14px;
						overflow: hidden; //多出的隐藏
						//text-overflow: ellipsis;//多出部分用...代替
						display: -webkit-box; //定义为盒子模型显示
						-webkit-line-clamp: 1; //用来限制在一个块元素显示的文本的行数
						-webkit-box-orient: vertical; //从上到下垂直排列子元素（设置伸缩盒子的子元素排列方式）
						margin-bottom: 10rpx;
					}
					.thing-setting {
						color: #d9d9d9;
						font-size: 12px;
					}
					.pay-price {
						display: flex;
						// align-items: center;
						.label {
							font-size: 14px;
							margin-right: 10rpx;
						}
						.price {
							font-weight: bold;
							font-size: 16px;
							&::before {
								content: '￥';
								font-weight: bold;
								font-size: 12px;
							}
						}
					}
				}
			}
		}
	}
	
}
.not-fount {
		width: 100%;
		display: flex;
		align-items: center;
		box-sizing: border-box;
		padding-top: 160rpx;
		flex-direction: column;
		justify-content: center;
		font-size: 20px;
		// color: #fff;
		color: #999;
		// background-color: #f5f5f5;
		// text-shadow: 0 0 10px #52e3fc, 0 0 20px aqua;
		image {
			width: 120px;
			height: 120px;
			margin-bottom: 30rpx;
		}
		padding-bottom: 160rpx;
}
scroll-view {
	width: 100%;
	height: 100%;
}
</style>
